<template>
  <view>
    <view :class="{head_nav_box:true,head_nav_box_border:borderType, head_nav_bg: bgColor}" :style="'height:'+globalData.navHeight+'px;padding:'+globalData.navTop+'px 7px '+(globalData.navHeight-globalData.menuButtonObject.height-globalData.navTop)+'px 12px'">
      <view :style="'width:'+globalData.menuButtonObject.width+'px;height:'+globalData.menuButtonObject.height+'px'" v-if="!custoNav||customBackBtn">
        <view class="head_btn_box" :class="{head_btn_bg: bgColor}" v-if="showNav">
          <view @click.stop="navBack" class="btn_box btn_box1" v-if="routeLength>1">
            <image class="img1" v-if="navImgType==0" src="@/static/image/navBack_icon.png" />
            <image class="img2" v-if="navImgType==1" src="@/static/image/goBack_con.png" />
          </view>
          <view @click.stop="navBack" class="btn_box btn_box1" v-else>
            <image class="img2" src="@/static/image/goHome_con.png" />
          </view>
        </view>
      </view>
      <view class="nav_title" :style="'width:'+(globalData.windowHeight/2+25-(globalData.menuButtonObject.width*2))+'px;height:'+globalData.menuButtonObject.height+'px;'" v-if="!custoNav">
        <view class="pageName_box" v-if="showType==0&&pageName" v-html="pageName"></view>
      </view>
      <!-- 使用插槽 自定义头部 -->
      <view style="flex:1;height:100%;" v-if="custoNav">
        <slot name="headNav"></slot>
      </view>
      <view :style="'width:'+globalData.menuButtonObject.width+'px;height:'+globalData.menuButtonObject.height+'px'"></view>
    </view>
    <view v-if="isPosition" class="temporary_position" :style="'height:'+globalData.navHeight+'px'"></view>
  </view>

</template>
<script>
export default {
  props: {
    pageName: String,
    showNav: { // 是否显示返回按钮
      type: Boolean,
      default: false
    },
    custoNav: { // 是否自定义头部-案例参考订单页
      type: Boolean,
      default: false
    },
    customBackBtn: {
      type: Boolean,
      default: false
    }, // 自定义头部时，是否显示返回按钮
    navImgType: { // 返回按钮图片
      type: Number,
      default: 0
    },
    borderType: {  // 是否带下边框
      type: Boolean,
      default: false
    },
    bgColor: { // 页面类型默认都显示标题根据每个页面判断
      type: Boolean,
      default: false
    },
    customBack: { // 自定义返回逻辑
      type: Function,
      default: null
    },






    // 后期自己在页面处理将对应的参数删除
    showType: { // 页面类型默认都显示标题根据每个页面判断 4发布开团
      type: Number,
      default: 0
    },
    leaveRemindData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    pageContentData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    routeData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isPosition: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      routeLength: 0,
    }
  },
  computed: {
    globalData () {
      return this.$store.state.globalData
    },
  },
  created () {
    this.routeLength = getCurrentPages().length
  },
  watch: {
  },
  methods: {
    async navBack () {
      // 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
      if(getCurrentPages().length <= 1){ // 路由栈没有上一页
        uni.switchTab({url: '/pages/index/index'});
      }else if (typeof this.customBack === 'function') {
        this.$emit('back')
        return
      } else {
        this.navigateBack({
          delta: 1
        })
      }

    // 后期自己在自己页面使用上面的自定义返回函数处理，处理 后删除代码
      let routeArr = getCurrentPages()
      if (this.showType == 4) {
        this.$emit('goBackFn', true)
        return
      }
    },
    async toIndex () {
      uni.switchTab({ url: '/pages/index/index'});
    }
  }
}
</script>
<style lang="scss" scoped>
.theme2.head_nav_box{
  background: transparent;
  border-bottom: 2px solid transparent;
  .navbar_title_box{
    color: #FFF;
  }
}
.head_nav_box {
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  &.head_nav_box_border {
    border-bottom: 2rpx solid #F2F3F5;
  }
  &.head_nav_bg {
    // background: #fc9c8b;
    background: none;
  }
  .head_btn_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    box-sizing: border-box;
    z-index: 67;
    &.head_btn_bg {
      background: none;
    }
    .btn_box {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 20rpx;
    }
    .btn_box1 {
      // padding: 0 20px 0 24px;
      .img1 {
        width: 40rpx;
        height: 40rpx;
      }
      .img2 {
        width: 60rpx;
        height: 60rpx;
      }
    }
    .btn_box2 {
      // padding: 0 24px 0 20px;
      .img2 {
        width: 40px;
        height: 40px;
      }
    }
  }
  .navbar_title_box {
    width: 100%;
    height: 100%;
    font-weight: 500;
    font-size: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
  }
  .user_msg_box {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 28px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    &.user_msg_boxS {
      justify-content: space-between;
    }
    button {
      margin: 0;
      padding: 0 16px;
    }
    .btn_box {
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 28px;
      background: linear-gradient(90deg, #FF2442 0%, #FB6F1C 100%);
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFF;
      image {
        width: 28px;
        height: 28px;
        display: inline-block;
        margin-right: 4px;
      }
    }
    .user_img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-right: 10px;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.nav_title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pageName_box {
  display: flex;
  justify-content: center;
  align-content: center;
  color: #323233;
  font-weight: 500;
  font-size: 36rpx;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.temporary_position {
  width: 100%;
  // height: 46px;
  opacity: 0;
}
.ellipsis{
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #FFF;
}
</style>
